<template>
  <transition name="fade-opacity">
    <div v-show="openModal" @click.self="closeModal" :class="isShowPf ? 'c-pf' : 'c-p'" class="modal">
      <div v-if="isShowText" class="c-fc-white c-fs22 c-mb30">{{text}}</div>
      <transition name="fade-translate-y">
        <div v-show="openModal" class="modal-content c-w100 c-p">
          <slot></slot>
          <div v-if="needCloseBtn" class="iconfont c-fs34 c-fc-gray c-pa c-p-t24 c-p-r24" @click='closeModal'>&#xe84e;</div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
let curScollTop = 0;
export default {
  components: {},
  props: {
    isShowText: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: ''
    },
    openModal: {
      //绑定的输入框的值
      type: Boolean,
      default: false
    },
    isShowPf: {
      type: Boolean,
      default: true
    },
    isOpenDisabledScroll: { // 打开弹窗时是否需要禁止滚动
      type: Boolean,
      default: true
    },
    needCloseBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    };
  },
  watch: {
    openModal(val) {
      if (val && this.isOpenDisabledScroll) {
        //开启弹窗时记录当前滚动距离
        curScollTop = document.documentElement.scrollTop || document.body.scrollTop;
        document.querySelector('body').classList.add('open-disabled-scroll');
      } else if (this.isOpenDisabledScroll) {
        document.querySelector('body').classList.remove('open-disabled-scroll');
        //关闭弹窗，恢复滚动位置
        window.scrollTo(0, curScollTop);
      }
    }
  },
  methods: {
    closeModal: function (e) {
      this.$emit("closeModal");
    }
  },
  activated() { },
  //关闭时移除body的弹窗禁止滚动样式
  deactivated() {
    document.querySelector('body').classList.remove('open-disabled-scroll');
  },
  destroyed() {
    document.querySelector('body').classList.remove('open-disabled-scroll');
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.modal {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1002;
  width: 100%;
  max-width: 16rem;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
</style>
